<template>
  <div class="userCenter">
    <el-container direction="vertical">
      <!-- 用户信息 -->
      <el-main class="userInfo">
        <el-card class="box-card" :body-style="{ padding: '0px' }" >
          <div class="card-content">
            <div class="avatar">
              <img :src="userInfo.avatar" alt="" class="img">
            </div>
            <div class="info">
              <div class="name">
                {{userInfo.nickName}}
              </div>
              <div class="other">
                <div><span class="data">111</span>被访问</div>
                <div><span class="data">44</span>关注</div>
                <div><span class="data">2</span>原创</div>
                <div><span class="data">333</span>粉丝</div>
              </div>
              <div class="more">
                <div>点击查看更多↓</div>
              </div>
            </div>
            <div class="editor">
              <el-button round>编辑资料</el-button>
              <el-button round>设置</el-button>
            </div>
          </div>
        </el-card>
      </el-main>
      <!-- 内容部分 -->
      <el-container direction="horizontal">

        <el-aside>

          <card-me class="me-area"></card-me>
          <el-card>
            <div slot="header" class="clearfix">
              <span class="tag-title">我的兴趣标签</span>
              <el-button style="float: right; padding: 3px 0" type="text">查看全部</el-button>
            </div>
            <el-tag
              v-for="tag in tags"
              :key="tag.name"
              class="tag"
              :type="tag.type">
              {{tag.name}}
            </el-tag>
          </el-card>
          

          <!-- <card-article cardHeader="我的文章" :articles="hotArticles"></card-article> -->

          <card-archive class="card-archive" cardHeader="文章归档" :archives="archives"></card-archive>

          <div id="he-plugin-standard"></div>

          <!-- <card-article cardHeader="最新文章" :articles="newArticles"></card-article> -->

        </el-aside>

        <el-main class="me-articles">

          <el-tabs type="border-card">
            <el-tab-pane label="我的文章">
              <article-item v-for="a in articles" :key="a.id" v-bind="a"></article-item>
              <!-- <article-scroll-page v-bind="article"></article-scroll-page> -->
            </el-tab-pane>
            <el-tab-pane label="兴趣">
              <ul class="me-allct-items">
                <li v-for="c in categorys" @click="view(c.interestTribeId)" :key="c.interestTribeId" class="me-allct-item">
                  <div class="me-allct-content">
                    <a class="me-allct-info">
                      <!-- <img class="me-allct-img" :src="c.avatar?c.avatar:defaultAvatar"/> -->
                      <h4 class="me-allct-name">{{c.interestTribeName}}</h4>
                      <!-- <p class="me-allct-description">{{c.description}}</p> -->
                    </a>

                    <div class="me-allct-meta">
                      <span>{{c.articles}} 文章</span>
                    </div>
                  </div>
                </li>
              </ul>
            </el-tab-pane>
            <!-- <el-tab-pane label="社区">社区</el-tab-pane> -->
            <!-- <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane> -->
          </el-tabs>

        </el-main>

      </el-container>

    </el-container>
  </div>
</template>

<script>
  import CardMe from '@/components/card/CardMe'
  import CardArticle from '@/components/card/CardArticle'
  import CardArchive from '@/components/card/CardArchive'
  import CardTag from '@/components/card/CardTag'
  import ArticleScrollPage from '@/views/common/ArticleScrollPage'
  import ArticleItem from '@/components/article/ArticleItem'

  import {getArticles, getHotArtices, getNewArtices} from '@/api/article'
  import {getHotTags} from '@/api/tag'
  import {listArchives} from '@/api/article'

  export default {
    name: 'userCenter',
    created() {
      let token = this.$store.state.token
      // this.getHotArtices()
      // this.getNewArtices()
      // this.getHotTags()
      this.listArchives(this.$store.state.token)
      this.findAllMyArticle(this.$store.state.token)
      this.findAllMyTag(this.$store.state.token)
      this.findUserInfo(this.$store.state.token)
      this.findAllfavor(this.$store.state.token)
    },
    mounted() {
      window.WIDGET = {
        "CONFIG": {
          "layout": "1",
          "width": "298",
          "height": "150",
          "background": "1",
          "dataColor": "FFFFFF",
          "borderRadius": "5",
          "modules": "10",
          "key": "1498ef2436004ac78a655bd9c676fba2"
        }
      }
      let script = document.createElement('script')
      script.type = 'text/javascript'
      script.src = 'https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0'
      document.getElementsByTagName('head')[0].appendChild(script)
    },
    data() {
      return {
        currentActiveName: 'userCenter',
        categorys: [],
        userInfo: [],
        tags: [
          { name: '标签一', type: '' },
          { name: '标签二', type: 'success' },
          { name: '标签三', type: 'info' },
          { name: '标签四', type: 'warning' },
          { name: '标签五', type: 'danger' }
        ],
        hotArticles: [],
        newArticles: [],
        archives: [],
        articles: [
          {
            "id":"1522233917292011521",
            "title":"我是少爷",
            "summary":"我是少爷",
            "commentCounts":0,
            "viewCounts":3,
            "weight":0,
            "createDate":"2022-05-05 00:00",
            "author":"浅蓝",
            "body":null,
            "tags":[
              {
                "id":5,
                "avatar":"/static/tag/java.png",
                "tagName":"springboot"
              },{
                "id":6,
                "avatar":"/static/tag/java.png",
                "tagName":"spring"
              }
             ],
            "category":null
          },{
            id: '11',
            title: "MyBatisPlus——条件构造器之select细节",
            summary: "MyBatisPlus——条件构造器之select细节",
            commentCounts: 0,
            viewCounts: 2,
            weight: 0,
            createDate: "2022-04-14",
            author: '1506842025339515000',
            "body":null,

          }
          
        ]
      }
    },
    methods: {
      view(id) {
        this.$router.push({path: `/${this.currentActiveName}/${id}`})
      },
      getHotArtices() {
        let that = this
        getHotArtices().then(data => {
          that.hotArticles = data.data
        }).catch(error => {
          if (error !== 'error') {
            that.$message({type: 'error', message: '最热文章加载失败!', showClose: true})
          }

        })

      },
      getNewArtices() {
        let that = this
        getNewArtices().then(data => {
          that.newArticles = data.data
        }).catch(error => {
          if (error !== 'error') {
            that.$message({type: 'error', message: '最新文章加载失败!', showClose: true})
          }

        })

      },
      getHotTags() {
        let that = this
        getHotTags().then(data => {
          that.hotTags = data.data
        }).catch(error => {
          if (error !== 'error') {
            that.$message({type: 'error', message: '最热标签加载失败!', showClose: true})
          }

        })
      },
      listArchives(token) {
        // listArchives().then((data => {
        //   this.archives = data.data
        // })).catch(error => {
        //   if (error !== 'error') {
        //     that.$message({type: 'error', message: '文章归档加载失败!', showClose: true})
        //   }
        // }) //原代码
        const that = this
        that.$http({
          headers: {'Authorization': token},
          url: '/articles/listArchives',
          method:'post',
        })
        .then(function(res) {
          console.log(res.data)
          that.$data.archives = res.data.data
        })
        .catch(error => {
          if (error !== 'error') {
            that.$message({type: 'error', message: '文章归档加载失败!', showClose: true})
          }
        })
      },
      // 查找自己的所有文章
      findAllMyArticle(token) {
        const that = this
        this.$http({
          headers: {'Authorization': token},
          url: '/articles/findAllPersonalArticle',
          method:'get',
        })
        .then(function(res) { 
          console.log(res)
          let article = res.data.data
          let newArticles = article.map(function(item,index){
            item.id = item.id + ''
            item.body = null
            return item 
          })
          that.$data.articles = newArticles
         })
      },
      findAllMyTag(token) {
        const that = this
        that.$http({
          headers: {'Authorization': token},
          url: '/tags/findPersonalTag',
          method:'get',
        })
        .then(function(res) {
          console.log(res)
          let type = ['','success','info','warning','danger']
          let tags = res.data.data.map(function(item,index) { 
            return {'name':item.tagName , 'type':type[index%(type.length)]}
          })
          that.$data.tags = tags
        })
      },
      findUserInfo(token) {
        const that = this
        that.$http({
          headers: {'Authorization': token},
          url: '/users/getUserInfo',
          method:'get',
        })
        .then(function(res) {
          console.log(res.data)
          that.$data.userInfo = res.data.data
        })
      },
      findAllfavor(token) {
        const that = this
        that.$http({
          headers: {'Authorization': token},
          url: '/interestTribe/findAllPersonalInterestTribe',
          method:'get',
        })
        .then(function(res) {
          console.log(res.data)
          that.$data.categorys = res.data.data
        })
      }


    },
    components: {
      'card-me': CardMe,
      'card-article': CardArticle,
      'card-tag': CardTag,
      ArticleScrollPage,
      CardArchive,
      'article-item': ArticleItem,
    }
  }
</script>

<style scoped>

  .box-card {
    height: 130px;
    margin-bottom: 10px;
    padding: 0px 20px;
    flex-direction: row;
    box-sizing: border-box;
  }

  .card-content {
    display: flex;
    align-items: center;
  }

  .card-content .avatar {
    height: 102px;
    width: 102px;
    /* position: relative; */
    /* top: -20px; */
  }

  .card-content .avatar .img {
    height: 100px;
    width: 100px;
    border-radius: 50%;
    border: 4px rgb(240,240,242) solid;
  }

  .card-content .info {
    flex: 4;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 10px 0 0 20px;
    font-size: 20px;
  }

  /* .card-content .info .name {

  } */

  .card-content .info .other {
    width: 270px;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
  }

  .card-content .info .other .data {
    font-weight: bold;
    font-size: 20px;
    margin-right: 4px;
  }

  .card-content .info .more {
    font-size: 14px;
  }

  .card-content .editor {
    flex: 1;
  }

  .el-container {
    width: 1220px;
  }

  /* .el-header {
    width: 960px;
  } */

  .el-aside {
    margin-right: 10px;
    width: 260px;
  }

  .el-main {
    padding: 0px;
    line-height: 16px;
  }

  .el-card {
    border-radius: 0;
  }

  .el-card:not(:first-child) {
    margin-top: 20px;
  }

  .tag {
    margin: 0 8px 6px 0;
  }

  .tag-title {
    font-weight: 600;
    color: #303133;
  }


   .me-allct-items {
    padding-top: 2rem;
  }

  .me-allct-item {
    width: 60%;
    display: inline-block;
    margin-bottom: 2.4rem;
    padding: 0 .7rem;
    box-sizing: border-box;
  }

  .me-allct-item:nth-child(even) {
    display: float;
    float: right;
  }

  .me-allct-content {
    display: inline-block;
    width: 100%;
    background-color: #fff;
    border: 1px solid #f1f1f1;
    transition: border-color .3s;
    text-align: center;
    padding: 1.5rem 0;
  }

  .me-allct-info {
    cursor: pointer;
  }

  .me-allct-img {
    margin: -40px 0 10px;
    width: 60px;
    height: 60px;
    vertical-align: middle;
    display: inline-block;
  }

  .me-allct-name {
    height: 60px;
    line-height: 60px;
    margin-left: 5px;
    font-size: 21px;
    font-weight: 150;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 4px;
    display: inline-block;
  }

  .me-allct-description {
    min-height: 50px;
    font-size: 13px;
    line-height: 25px;
    padding: 0 50px;
  }

  .me-allct-meta {
    font-size: 12px;
    color: #969696;
  }

  .card-archive{
    margin-bottom: 20px;
  }

</style>
